<template>
  <div class="page-wrap">
    <NormalForm pageTitle="跟进阶段" :operateForm="queryForm" :formList="formList" :enumOpt="enumOpt" @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
    <div class="g-card mt16 table-card">
      <div class="right-btn" style="margin: 0; padding-top: 0;">
        <el-button type="primary" icon="el-icon-plus" @click="goRouter('add')" v-hasPermi="['admin:info:add']">创建跟进阶段</el-button>
      </div>
      <el-table :data="tableData" v-loading="tableLoading" height="calc(100% - 106px)" :row-style="{ height: '40px' }">
        <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
        <el-table-column prop="flowName" label="旅程名称" align="center"></el-table-column>
        <el-table-column prop="triggerId" label="触发条件" align="center">
          <template slot-scope="{ row }">
            <div v-for="item in enumOpt.triggerList" :key="item.dictValue">
              <span v-if="row.triggerId == item.dictValue">{{
                item.dictLabel
              }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="countNodeNb" label="旅程阶段总数" align="center"></el-table-column>
        <el-table-column prop="creatBy" label="创建人" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="140" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" @click="goRouter('detail', row.flowId)"
              v-hasPermi="['admin:info:query']">详情</el-button>
            <el-button type="text" @click="goRouter('edit', row.flowId)" v-hasPermi="['admin:info:edit']"
              :disabled="row.triggerId === 10">编辑</el-button>
            <el-button type="text" @click="deleteItem(row.flowId)" v-hasPermi="['admin:info:remove']"
              :disabled="row.triggerId === 10">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
    </div>
    <dialog-text text="确认删除该旅程？" :visible.sync="visible" @confirm="deleteConfirm"></dialog-text>
  </div>
</template>

<script>
import DialogText from "@/components/DialogText.vue";
import { list, deleteJourney } from "@/api/automarket/followStage";

export default {
  components: { DialogText },
  data() {
    return {
      queryForm: {
        flowName: "", // 旅程名称
        triggerId: null, // 触发条件
        deptId: null, // 管理机构
        staff: '', // 创建人
        dateRange: [],
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '旅程名称',
          value: '',
          prop: 'flowName',
          type: 'INPUT',
          emunName: ''
        },
        {
          label: '触发节点',
          value: null,
          prop: 'triggerId',
          type: 'SELECT',
          emunName: 'triggerList'
        },
        {
          label: '管理机构',
          value: null,
          prop: 'deptId',
          type: 'MANAGE_COM',
          emunName: ''
        },
        {
          label: '创建人',
          value: '',
          prop: 'staff',
          type: 'STAFF',
          emunName: ''
        },
        {
          label: '创建',
          value: [],
          prop: 'dateRange',
          type: 'DATE_RANGE',
          formate: 'yyyy-MM-dd',
          emunName: ''
        },
      ],
      enumOpt: {
        triggerList: [],
      },
      tableData: [],
      tableLoading: false,
      total: 0,
      visible: false,
      currentDeleteId: ""
    };
  },
  mounted() {
    this.init();
    this.handleQuery();
  },
  methods: {
    init() {
      this.getDicts("journey_condition_type").then((res) => {
        if (res.code === 200) {
          this.enumOpt.triggerList = res.data;
        }
      });
    },
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getListFn()
    },
    getListFn() {
      let obj = {
        flowName: this.queryForm.flowName,
        createCodeList: this.queryForm.staff + '',
        triggerId: this.queryForm.triggerId, // 触发条件
        deptId: this.queryForm.deptId, // 管理机构
        beginTime: this.queryForm.dateRange?.[0],
        endTime: this.queryForm.dateRange?.[1],
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
      };
      this.tableLoading = true;
      list(obj).then((res) => {
        if (res.code === 200) {
          this.tableData = res.rows;
          this.total = res.total;
        }
      }).finally(() => {
        this.tableLoading = false;
      })
    },
    // 重置
    handleReset() {
      this.queryForm = {
        flowName: "", // 旅程名称
        triggerId: null, // 触发条件
        deptId: null, // 管理机构
        staff: '', // 创建人
        dateRange: [],
        pageNum: 1,
        pageSize: 20,
      };
      this.getListFn();
    },
    // 分页
    handleSizeChange(value) {
      this.queryForm.pageNum = 1;
      this.queryForm.pageSize = value;
      this.getListFn();
    },
    handleCurrentChange(value) {
      this.queryForm.pageNum = value;
      this.getListFn();
    },
    // 详情 编辑
    goRouter(type, flowId) {
      this.$router.push({
        path: `${type}FollowStage`,
        query: { flowId, type },
      });
    },
    // 删除
    deleteItem(id) {
      this.currentDeleteId = id
      this.visible = true
    },
    deleteConfirm() {
      this.tableLoading = true
      deleteJourney(this.currentDeleteId).then(res => {
        this.$message.success(res.msg || "删除成功")
        this.handleQuery();
      }).catch(() => {
        this.$message.error(res.msg || "删除失败")
      }).finally(() => {
        this.tableLoading = false
        this.visible = false
      })
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.page-wrap {
  height: 100%;
  .table-card {
    padding: 20px;
    height: calc(100% - 208px);
  }
}
</style>
